{% extends "admin/base.html" %}

{% block content %}
<div class="card">
    <div class="card-header" style="display: flex; justify-content: space-between; align-items: center;">
        <h2>{% if action == 'add' %}添加搜索引擎{% else %}编辑搜索引擎{% endif %}</h2>
        <a href="/admin/search-engines" class="btn btn-secondary">返回列表</a>
    </div>
    <div class="card-body">
                    <form action="/admin/search-engines/save" method="post" enctype="multipart/form-data">
                        {% if action == 'edit' %}
                        <input type="hidden" name="id" value="{{ engine.id }}">
                        {% endif %}
                        
                        <div class="form-group">
                            <label for="name">搜索引擎名称 <span style="color: #e74c3c;">*</span></label>
                            <input type="text" class="form-control" id="name" name="name" 
                                   {% if action == 'edit' %}value="{{ engine.name }}"{% endif %} 
                                   placeholder="请输入搜索引擎名称" required>
                        </div>
                        
                        <div class="form-group">
                            <label for="url">搜索引擎URL <span style="color: #e74c3c;">*</span></label>
                            <input type="text" class="form-control" id="url" name="url" 
                                   {% if action == 'edit' %}value="{{ engine.url }}"{% endif %} 
                                   placeholder="请输入搜索引擎URL，包含搜索参数占位符 {query}，如 https://www.google.com/search?q=" required>
                            <small class="form-text text-muted">请确保URL中包含 {query} 作为搜索词的占位符</small>
                        </div>
                        
                        <div class="form-group">
                            <label for="icon_file" style="color: #e74c3c;">图标上传</label>
                            <div class="custom-file">
                                <input type="file" class="custom-file-input" id="icon_file" name="icon_file" accept="image/*">
                                <!-- <label class="custom-file-label" for="icon_file">选择图片文件</label> -->
                            </div>
                            {% if action == 'edit' and engine.icon %}
                            <div class="mt-3">
                                <label>当前图标：</label>
                                {% if engine.icon and engine.icon.startswith('/') %}
                                <img src="{{ engine.icon }}" alt="{{ engine.name }}" style="width: 40px; height: 40px; object-fit: contain;">
                                {% endif %}
                                <input type="hidden" name="existing_icon" value="{{ engine.icon }}">
                                <div class="form-check mt-2">
                                    <input type="checkbox" class="form-check-input" id="remove_icon" name="remove_icon">
                                    <label class="form-check-label" for="remove_icon">移除当前图标</label>
                                </div>
                            </div>
                            {% endif %}
                            <small class="form-text text-muted">支持上传图片文件（PNG、JPG、SVG等）</small>
                        </div>
                        
                        <div class="form-group">
                            <div class="col-sm-offset-2 col-sm-10">
                                <button type="submit" class="btn btn-primary">{% if action == 'add' %}添加{% else %}保存{% endif %}</button>
                                <a href="/admin/search-engines" class="btn btn-default">取消</a>
                            </div>
                        </div>
                    </form>

    </div>

<script src="/static/js/admin/search-engine-form.js"></script>
    
    <!-- 表单校验脚本 -->
    <script>
    (function() {
        var form = document.querySelector('form');
        if (form) {
            form.addEventListener('submit', function(event) {
                // 表单提交校验
                var nameInput = document.getElementById('name');
                var urlInput = document.getElementById('url');
                
                if (!nameInput || !nameInput.value.trim()) {
                    alert('请输入搜索引擎名称');
                    if (nameInput) nameInput.focus();
                    event.preventDefault();
                    return false;
                }
                
                if (!urlInput || !urlInput.value.trim()) {
                    alert('请输入搜索引擎URL');
                    if (urlInput) urlInput.focus();
                    event.preventDefault();
                    return false;
                }
                
                if (urlInput && !urlInput.value.includes('{query}')) {
                    alert('搜索引擎URL必须包含 {query} 作为搜索词的占位符');
                    urlInput.focus();
                    event.preventDefault();
                    return false;
                }
                
                return true;
            });
        }
    })();
    </script>


{% endblock %}